<template>
  <view style="position: relative;">

    <view :style="{height:screenHeight+'px'}">
      <image src="https://qykh.shopec.com.cn/image-server/dz/invite.jpg" mode="scaleToFill"></image>
      <image class="qrcode" :src="qrcode" mode="scaleToFill" v-if="qrcode"></image>
    </view>

    <view class="share-wrap">
      <button class="share-content" open-type='share'>
        <image src="../static/pay/wx_selected.png" mode="scaleToFill"></image>
        <text>好友/群</text>
      </button>

      <view class="share-content" @click="save">
        <image src="../static/pay/icon-share2.png" mode="scaleToFill"></image>
        <text>保存分享图片</text>
      </view>

    </view>
  </view>
</template>

<script>
import {qrcode} from '@/api/marketing-api.js'

const GLOBAL_CONFIG = require('@/settings');

export default {
  data() {
    return {
      screenHeight: "",
      qrcode: '',
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
    memberNo() {
      return this.userInfo.memberNo;
    },
    tenantId() {
      return this.$store.state.user.tenantId;
    },
  },
  onLoad() {
    this.screenHeight = uni.getSystemInfoSync().windowHeight
    this.getqrcode();
  },
  onShareAppMessage(res) {
    console.log(res);
    return {
      title: '专业便捷的租车服务',
      path: `pages/home/home?scene=${this.memberNo}`,
      imageUrl: 'https://qykh.shopec.com.cn/image-server/dz/invite_card.png',
    };
  },
  methods: {
    async getqrcode() {
      qrcode({
        url: 'pages/home/home',
        tenantId: this.tenantId,
      }).then(res => {
        this.qrcode = GLOBAL_CONFIG.baseImageUrl + '/' + res.data
      }).catch(err => {
        uni.showToast({title: err, icon: 'error'});
      })
    },
    share() {
      uni.share()
    },
    getImageInfo(src) {
      return new Promise((resolve) => {
        uni.getImageInfo({
          src: src,
          success(res) {
            resolve(res);
          },
        })
      });
    },
    async save() {
      uni.showToast({title: '保存中...', icon: 'loading'});
      const {path} = await this.getImageInfo(this.qrcode);
      uni.saveImageToPhotosAlbum({
        filePath: path,
        complete(res) {
          uni.showToast({title: '保存成功', icon: 'success'});
          console.log(res);
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.qrcode {
  width: 200upx;
  height: 200upx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom-share {
  border: 0 !important;
  background: red !important;
  border-radius: 30;
}

image {
  width: 100%;
  height: 100%;
}

.share-wrap {
  width: 100%;
  position: absolute;
  bottom: 130upx;
  @include flex;
  justify-content: space-between;

  .share-content {
    @include flex;
    align-items: center;
    border-radius: 90upx;
    background-color: $bg-white-color;
    padding: 10upx 30upx;
    margin: 0 40upx;

    image {
      width: 60upx;
      height: 60upx;

    }

    text {
      color: $text-color-33;
      font-size: 28upx;
      margin-left: 10upx;
    }
  }
}
</style>
